<template>
  <div class="PurchaseConfig">
    <div>
      <div>
        <p>物品名称</p>
        <el-input v-model="from1.name"  />
      </div>
      <div>
        <p>售价</p>
        <el-input v-model="from1.firstPrice" />-----
        <el-input v-model="from1.lastPrice"/>
      </div>
      <div>
        <el-button type="success" @click="getSearch">搜索</el-button>
      </div>
    </div>
    <div>
      <p>俄罗斯采购</p>
       <el-radio-group v-model="from.ruBuy">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">停用</el-radio>
        </el-radio-group>
      <div>
        <span class="series">俄罗斯采购系列</span>
        <el-input v-model="from.ruBuyPercentString"></el-input>
        <el-button type="primary" @click="preservation">保存</el-button>
      </div>
    </div>
    <div>
      <p>IGXE采购</p>
     <el-radio-group v-model="from.igxeBuy">
        <el-radio :label="0">启用</el-radio>
        <el-radio :label="1">停用</el-radio>
      </el-radio-group>
      <div>
        <span class="seriesss">IGXE采购系列</span>
        <el-input v-model="from.igxeBuyPercentString"></el-input>
        <el-button type="primary" @click="preservation">保存</el-button>
      </div>
    </div>
    <div>
      <p>C5采购</p>
      <el-radio-group v-model="from.c5Buy">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">停用</el-radio>
        </el-radio-group> 
      <div>
        <span class="seriess">C5采购系列</span>
        <el-input v-model="from.c5BuyPercentString"></el-input>
        <el-button type="primary" @click="preservation">保存</el-button>
      </div>
    </div>
    <template>
      <el-table :data="list3.list" border style="width: 100%">
        <el-table-column prop="id" label="物品ID" width="180"></el-table-column>
        <el-table-column prop="type" label="物品类型" width="180"></el-table-column>
        <el-table-column prop="name" label="物品名称" width="180"></el-table-column>
        <el-table-column prop="img" label="图片预览" width="180">
          <template slot-scope="scope">
                    <img :src="scope.row.img" style="height:57px;">
            </template>
        </el-table-column>
        <el-table-column prop="quality" label="品质" width="180"></el-table-column>
        <el-table-column prop="price" label="网站售价" width="180"></el-table-column>
        <el-table-column prop="priceLowRussia" label="俄罗斯最低价" width="180"></el-table-column>
        <el-table-column prop="priceLowIgxe" label="IGXE最低价" width="180"></el-table-column>
        <el-table-column prop="priceLowC5" label="C5最低价" width="180"></el-table-column>
        
      </el-table>
      <el-pagination   @current-change="currentChange"  background layout="prev, pager, next" :total="list3.pages*10"></el-pagination>
    </template>
  </div>
</template>
   </div>
</template>
<script>
import axios from '../../../utils/publicApi'
import { Loading } from 'element-ui';
export default {
  data() {
    return {
      from:'',
      list:[
        {
          name:'物品ID',
          key:'id'
        },
        {
          name:'物品类型',
          key:'type'
        },
        {
          name:'物品名称',
          key:'name'
        },
        {
          name:'图片预览',
          key:'img'
        },
        {
          name:'品质',
          key:'quality'
        },
        {
          name:'网站售价',
          key:'price'
        },
        {
          name:'俄罗斯最低价',
          key:'priceLowRussia'
        },
        {
          name:'IGXE最低价',
          key:'priceLowIgxe'
        },
        {
          name:'C5最低价',
          key:'priceLowC5'
        },
      ],
      list2:[
        {
          name:'俄罗斯采购',
          key:'ruBuy'
        },
        {
          name:'IGXE采购',
          key:'igxeBuy'
        },
        {
          name:'C5采购',
          key:'c5Buy'
        }
      ],
      list1:[
          {
              prop:"id",
              name:"物品id"
          },
          {
              prop:"leixing",
              name:"物品类型"
          },
          {
              prop:"mingcheng",
              name:"物品名称"
          },
          {
              prop:"img",
              name:"图片预览"
          },
          {
              prop:"pinzhi",
              name:"品质"
          },
          {
              prop:"pirce",
              name:"网站售价"
          },
          {
              prop:"elspirece",
              name:"俄罗斯售价"
          },
          {
              prop:"IGXEpirece",
              name:"IGXE最低价"
          },
          {
              prop:"elspirece",
              name:"俄罗斯售价"
          },
      ],
     list3:'',
     from1:{
       name:'',
       firstPrice:'',
       lastPrice:'',
       currentPage:1,
       pageSize:5
     },
    from2:{
       name:'',
       firstPrice:'',
       lastPrice:'',
       currentPage:1,
       pageSize:5
     },
     sel:'',
     sell:''
    };
  },
  async created() {
   var obj = await axios.getAll('/gamemall/procurement/list',{currentPage:1,pageSize:5})
    axios.getAll('/gamemall/procurement/setting').then((res)=>{
      this.from = res.obj
    })
    var list = await axios.getAll('/gamemall/droplist/quality?id=1')
     this.sel = list.obj
     var list1 = await  axios.getAll('/gamemall/droplist/type')
     this.sell = list1.obj
     this.changes(obj)
  },
  methods:{
    preservation(){
      axios.postAll('/gamemall/procurement/update',this.from).then((res)=>{
        if(res.code == 200){
          this.$message({
              showClose: true,
              message: '保存成功',
              type: 'success'
              });
        }else{
           this.$message({
              showClose: true,
              message: '保存失败',
              type: 'error'
              });
        }
      })
    },
    getSearch(){
      var options = false
      Loading.service(options);
       this.from2 = JSON.parse(JSON.stringify(this.from1))
        axios.getAll('/gamemall/procurement/list',this.from1).then((res)=>{
           if(res.code == 200){
             this.changes(res,options)
           }
        })
    },
    changes(parms,options){
        parms.obj.list.map((item)=>{
          this.sel.map((item1)=>{
            if(item.quality == item1.id){
              item.quality = item1.name
            }
            this.sell.map((item2)=>{
              if(item.type == item2.id){
                item.type = item2.name
              }
            })
          })
        })
        this.list3 = parms.obj
        let loadingInstance = Loading.service(options);
          this.$nextTick(() => { 
            loadingInstance.close();
          });
    },
    currentChange(e){
      var options = false
      Loading.service(options);
       this.from1.currentPage = e
       this.from2.currentPage = e
        axios.getAll('/gamemall/procurement/list',this.from2).then((res)=>{
           if(res.code == 200){
              this.changes(res,options)
           }
        })
    }
  }
};
</script>
<style lang="less">
@import "../../../style/mixin.less";
.PurchaseConfig {
  .el-table__row{
    height: 100px;
  }
  .series{
    margin:0 40px;
  }
  .seriesss{
    margin: 0 50px 0 40px;
  }
  .seriess{
    margin: 0 65px 0 40px;
    
  }
  .el-table{
    margin: 40px 0px;
  }
  > div:nth-of-type(1) {
    margin-bottom: 30px;
    text-align: left;
    > div:nth-of-type(1) .el-input {
      .w(200);
    }
    p {
      margin: 20px 0px;
    }
    > div {
      width: 30%;
      display: inline-block;
      p{
        width: 230px;
        text-align: center;
      }
    }
    > div:nth-of-type(2) .el-input {
      width: 100px;
    }
  }
  > div:nth-of-type(2),
  div:nth-of-type(3),
  div:nth-of-type(4) {
    text-align: left;
    margin: 20px 0px;
    div {
      display: inline-block;
    }
    > p {
      display: inline-block;
      .w(100) 
    }
    .el-input {
      width: 100px;
      height: 30px;
      display: inline-block;
    }
  }
}
</style>
